/* Regular size illustrations */

.sprite-fm-illustration,
.sprite-fm-illustration-before::before,
.sprite-fm-illustration-after::after {
    background: url(../../images/sprites/fm-illustration-sprite.svg) no-repeat;
    background-size: 2000%;
    display: block;
    content: '';

    /* Default size. need to be overrided by each implementation */
    width: var(--width, 200px);
    height: var(--height, 250px);

    --scale: calc(var(--width) / 200);
}

/* First Row */

.sprite-fm-illustration.img-topbar-email-registration,
.sprite-fm-illustration.img-topbar-email-registration-before::before,
.sprite-fm-illustration.img-topbar-email-registration-after::after {
    background-position: 0 0;
}
.sprite-fm-illustration.img-transferpage-empty-transfer,
.sprite-fm-illustration.img-transferpage-empty-transfer-before::before,
.sprite-fm-illustration.img-transferpage-empty-transfer-after::after {
    background-position: calc(100% / 19) 0;
}
.sprite-fm-illustration.img-dialog-business-contacts,
.sprite-fm-illustration.img-dialog-business-contacts-before::before,
.sprite-fm-illustration.img-dialog-business-contacts-after::after {
    background-position: calc(200% / 19) 0;
}
.sprite-fm-illustration.img-dialog-contacts,
.sprite-fm-illustration.img-dialog-contacts-before::before,
.sprite-fm-illustration.img-dialog-contacts-after::after {
    background-position: calc(300% / 19) 0;
}
.sprite-fm-illustration.img-dialog-decryption-key,
.sprite-fm-illustration.img-dialog-decryption-key-before::before,
.sprite-fm-illustration.img-dialog-decryption-key-after::after {
    background-position: calc(400% / 19) 0;
}
.sprite-fm-illustration.img-meetings-e2ee,
.sprite-fm-illustration.img-meetings-e2ee-before::before,
.sprite-fm-illustration.img-meetings-e2ee-after::after {
    background-position: calc(500% / 19) 0;
}
.sprite-fm-illustration.img-transferpage-transfer,
.sprite-fm-illustration.img-transferpage-transfer-before::before,
.sprite-fm-illustration.img-transferpage-transfer-after::after {
    background-position: calc(600% / 19) 0;
}
.sprite-fm-illustration.img-dialogs-achievements,
.sprite-fm-illustration.img-dialogs-achievements-before::before,
.sprite-fm-illustration.img-dialogs-achievements-after::after {
    background-position: calc(700% / 19) 0;
}
.sprite-fm-illustration.img-achievements-bonus,
.sprite-fm-illustration.img-achievements-bonus-before::before,
.sprite-fm-illustration.img-achievements-bonus-after::after {
    background-position: calc(800% / 19) 0;
}
.sprite-fm-illustration.img-achievements-desktop-app,
.sprite-fm-illustration.img-achievements-desktop-app-before::before,
.sprite-fm-illustration.img-achievements-desktop-app-after::after {
    background-position: calc(900% / 19) 0;
}
.sprite-fm-illustration.img-dialog-email,
.sprite-fm-illustration.img-dialog-email-before::before,
.sprite-fm-illustration.img-dialog-email-after::after {
    background-position: calc(1000% / 19) 0;
}
.sprite-fm-illustration.img-dialog-groupchat,
.sprite-fm-illustration.img-dialog-groupchat-before::before,
.sprite-fm-illustration.img-dialog-groupchat-after::after {
    background-position: calc(1100% / 19) 0;
}
.sprite-fm-illustration.img-achievements-invite-users,
.sprite-fm-illustration.img-achievements-invite-users-before::before,
.sprite-fm-illustration.img-achievements-invite-users-after::after {
    background-position: calc(1200% / 19) 0;
}
.sprite-fm-illustration.img-achievements-mobile-app,
.sprite-fm-illustration.img-achievements-mobile-app-before::before,
.sprite-fm-illustration.img-achievements-mobile-app-after::after {
    background-position: calc(1300% / 19) 0;
}
.sprite-fm-illustration.img-achievements-sms-verification,
.sprite-fm-illustration.img-achievements-sms-verification-before::before,
.sprite-fm-illustration.img-achievements-sms-verification-after::after {
    background-position: calc(1400% / 19) 0;
}
.sprite-fm-illustration.img-dialog-backup-phone,
.sprite-fm-illustration.img-dialog-backup-phone-before::before,
.sprite-fm-illustration.img-dialog-backup-phone-after::after {
    background-position: calc(1500% / 19) 0;
}
.sprite-fm-illustration.img-dialog-upgrade,
.sprite-fm-illustration.img-dialog-upgrade-before::before,
.sprite-fm-illustration.img-dialog-upgrade-after::after {
    background-position: calc(1600% / 19) 0;
}
.sprite-fm-illustration.img-dialog-overquota-storage,
.sprite-fm-illustration.img-dialog-overquota-storage-before::before,
.sprite-fm-illustration.img-dialog-overquota-storage-after::after {
    background-position: calc(1700% / 19) 0;
}
.sprite-fm-illustration.img-dialog-transfer-full,
.sprite-fm-illustration.img-dialog-transfer-full-before::before,
.sprite-fm-illustration.img-dialog-transfer-full-after::after {
    background-position: calc(1800% / 19) 0;
}
.sprite-fm-illustration.img-dialog-account-lock,
.sprite-fm-illustration.img-dialog-account-lock-before::before,
.sprite-fm-illustration.img-dialog-account-lock-after::after {
    background-position: calc(1900% / 19) 0;
}

/* Second Row */

.sprite-fm-illustration.img-dialog-account-recovery,
.sprite-fm-illustration.img-dialog-account-recovery-before::before,
.sprite-fm-illustration.img-dialog-account-recovery-after::after {
    background-position: 0 calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-mobile-success,
.sprite-fm-illustration.img-dialog-mobile-success-before::before,
.sprite-fm-illustration.img-dialog-mobile-success-after::after {
    background-position: calc(100% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-sms-verification,
.sprite-fm-illustration.img-dialog-sms-verification-before::before,
.sprite-fm-illustration.img-dialog-sms-verification-after::after {
    background-position: calc(200% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-business-expiry,
.sprite-fm-illustration.img-dialog-business-expiry-before::before,
.sprite-fm-illustration.img-dialog-business-expiry-after::after {
    background-position: calc(300% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-coin,
.sprite-fm-illustration.img-dialog-coin-before::before,
.sprite-fm-illustration.img-dialog-coin-after::after {
    background-position: calc(400% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-cookie,
.sprite-fm-illustration.img-dialog-cookie-before::before,
.sprite-fm-illustration.img-dialog-cookie-after::after {
    background-position: calc(500% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-copyright,
.sprite-fm-illustration.img-dialog-copyright-before::before,
.sprite-fm-illustration.img-dialog-copyright-after::after {
    background-position: calc(600% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-login,
.sprite-fm-illustration.img-dialog-login-before::before,
.sprite-fm-illustration.img-dialog-login-after::after {
    background-position: calc(700% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-safe,
.sprite-fm-illustration.img-dialog-safe-before::before,
.sprite-fm-illustration.img-dialog-safe-after::after {
    background-position: calc(800% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-printer,
.sprite-fm-illustration.img-dialog-printer-before::before,
.sprite-fm-illustration.img-dialog-printer-after::after {
    background-position: calc(900% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-pw-manager,
.sprite-fm-illustration.img-dialog-pw-manager-before::before,
.sprite-fm-illustration.img-dialog-pw-manager-after::after {
    background-position: calc(1000% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-usb,
.sprite-fm-illustration.img-dialog-usb-before::before,
.sprite-fm-illustration.img-dialog-usb-after::after {
    background-position: calc(1100% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-payment,
.sprite-fm-illustration.img-dialog-payment-before::before,
.sprite-fm-illustration.img-dialog-payment-after::after {
    background-position: calc(1200% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-voucher,
.sprite-fm-illustration.img-dialog-voucher-before::before,
.sprite-fm-illustration.img-dialog-voucher-after::after {
    background-position: calc(1300% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-chat-url-preview,
.sprite-fm-illustration.img-chat-url-preview-before::before,
.sprite-fm-illustration.img-chat-url-preview-after::after {
    background-position: calc(1400% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-dialog-account-setting,
.sprite-fm-illustration.img-dialog-account-setting-before::before,
.sprite-fm-illustration.img-dialog-account-setting-after::after {
    background-position: calc(1500% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-passowrd-reset-unlock-account,
.sprite-fm-illustration.img-passowrd-reset-unlock-account-before::before,
.sprite-fm-illustration.img-passowrd-reset-unlock-account-after::after {
    background-position: calc(1600% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-password-reset-recovery-key,
.sprite-fm-illustration.img-password-reset-recovery-key-before::before,
.sprite-fm-illustration.img-password-reset-recovery-key-after::after {
    background-position: calc(1700% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-password-recovery-device1,
.sprite-fm-illustration.img-password-recovery-device1-before::before,
.sprite-fm-illustration.img-password-recovery-device1-after::after {
    background-position: calc(1800% / 19) calc(var(--scale) * -250);
}
.sprite-fm-illustration.img-password-recovery-device2,
.sprite-fm-illustration.img-password-recovery-device2-before::before,
.sprite-fm-illustration.img-password-recovery-device2-after::after {
    background-position: calc(1900% / 19) calc(var(--scale) * -250);
}

/* Third Row */

.sprite-fm-illustration.img-password-recovery-device3,
.sprite-fm-illustration.img-password-recovery-device3-before::before,
.sprite-fm-illustration.img-password-recovery-device3-after::after {
    background-position: 0 calc(var(--scale) * -500);
}
.sprite-fm-illustration.img-file-link-lightbulb,
.sprite-fm-illustration.img-file-link-lightbulb-before::before,
.sprite-fm-illustration.img-file-link-lightbulb-after::after {
    background-position: calc(100% / 19) calc(var(--scale) * -500);
}
.sprite-fm-illustration.img-dialog-desktop-app,
.sprite-fm-illustration.img-dialog-desktop-app-before::before,
.sprite-fm-illustration.img-dialog-desktop-app-after::after {
    background-position: calc(200% / 19) calc(var(--scale) * -500);
}
.sprite-fm-illustration.img-dialog-payment-card-exp,
.sprite-fm-illustration.img-dialog-payment-card-exp-before::before,
.sprite-fm-illustration.img-dialog-payment-card-exp-after::after {
    background-position: calc(300% / 19) calc(var(--scale) * -500);
}

/* Wide illustrations */
.sprite-fm-illustration-wide,
.sprite-fm-illustration-wide-before::before,
.sprite-fm-illustration-wide-after::after {
    background: url(../../images/sprites/fm-illustration-sprite-wide.svg) no-repeat;
    background-size: 1000%;
    display: block;
    content: '';

    /* Default size. need to be overrided by each implementation */
    width: var(--width, 400px);
    height: var(--height, 250px);

    --scale: calc(var(--width) / 400);
}

/* First Row */

.sprite-fm-illustration-wide.img-dialog-referral-program,
.sprite-fm-illustration-wide.img-dialog-referral-program-before::before,
.sprite-fm-illustration-wide.img-dialog-referral-program-after::after {
    background-position: 0 0;
}
.sprite-fm-illustration-wide.img-backup-computer,
.sprite-fm-illustration-wide.img-backup-computer-before::before,
.sprite-fm-illustration-wide.img-backup-computer-after::after {
    background-position: calc(100% / 9) 0;
}
.sprite-fm-illustration-wide.img-dialog-expiry-link,
.sprite-fm-illustration-wide.img-dialog-expiry-link-before::before,
.sprite-fm-illustration-wide.img-dialog-expiry-link-after::after {
    background-position: calc(200% / 9) 0;
}
.sprite-fm-illustration-wide.img-meetings-create-account,
.sprite-fm-illustration-wide.img-meetings-create-account-before::before,
.sprite-fm-illustration-wide.img-meetings-create-account-after::after {
    background-position: calc(300% / 9) 0;
}
.sprite-fm-illustration-wide.img-backup-rewind,
.sprite-fm-illustration-wide.img-backup-rewind-before::before,
.sprite-fm-illustration-wide.img-backup-rewind-after::after {
    background-position: calc(400% / 9) 0;
}
.sprite-fm-illustration-wide.registration,
.sprite-fm-illustration-wide.registration-before::before,
.sprite-fm-illustration-wide.registration-after::after {
    background-position: calc(500% / 9) 0;
}
.sprite-fm-illustration-wide.img-dialog-megadrop,
.sprite-fm-illustration-wide.img-dialog-megadrop-before::before,
.sprite-fm-illustration-wide.img-dialog-megadrop-after::after {
    background-position: calc(600% / 9) 0;
}
.sprite-fm-illustration-wide.img-dialog-darkmode,
.sprite-fm-illustration-wide.img-dialog-darkmode-before::before,
.sprite-fm-illustration-wide.img-dialog-darkmode-after::after {
    background-position: calc(700% / 9) 0;
}
.sprite-fm-illustration-wide.img-password-recovery-devices,
.sprite-fm-illustration-wide.img-password-recovery-devices-before::before,
.sprite-fm-illustration-wide.img-password-recovery-devices-after::after {
    background-position: calc(800% / 9) 0;
}
.sprite-fm-illustration-wide.img-mega-logo-light,
.sprite-fm-illustration-wide.img-mega-logo-light-before::before,
.sprite-fm-illustration-wide.img-mega-logo-light-after::after,
.theme-light .sprite-fm-illustration-wide.img-mega-logo {
    background-position: calc(900% / 9) 0;
}

/* Second Row */

.sprite-fm-illustration-wide.mega-logo-dark,
.sprite-fm-illustration-wide.mega-logo-dark-before::before,
.sprite-fm-illustration-wide.mega-logo-dark-after::after,
.theme-dark .sprite-fm-illustration-wide.img-mega-logo {
    background-position: 0 calc(var(--scale) * -250);
}
